import React,{useState,useEffect} from 'react'
import Header from '../../components/Header/Header'
import { reqgetcate,reqgetgoods } from '../../http/api'
import { $pre } from '../../http/http'
import { filterPrice } from '../../filters';
import './Cate.less'

export default function Cate(props) {
  const [getcate,setCate]=useState([])
  const [n,setN]=useState(0)
  const [getgoods,setGoods]=useState([])

let Left=()=>{
  reqgetcate().then(res=>{
      setCate(res.data.list)
    })
}

let Right=(fid)=>{
  reqgetgoods({fid}).then(res=>{
    setGoods(res.data.list)
    })
}

useEffect(()=>{
  Left();
  Right()
},[])


  let toDetail=(id)=>{
    props.history.push('/detail/'+id)
  }

  return (
    <div>
        <Header title='分类'></Header>
        <div className='wrap'>
          <div className='left'>
            {getcate.map((item,index)=>{
              return <li key={item.id} className={index == n ?'active':''} onClick={()=>Right(item.id)}>
                {item.catename}
              </li>
            })}
          </div>
          <div className='right'>
            {getgoods.map((item)=>{
              return <div key={item.id} onClick={()=>toDetail(item.id)}>
                
                <img src={$pre+item.img} alt="" />
                <div className='name'>name:{item.goodsname}</div>
                <div>价格：{filterPrice(item.price)}</div>
                <div>市场价格：{filterPrice(item.market_price)}</div>
              </div>    
            })}
          </div>
        </div>

    </div>
  )
}
